// 创建开发环境配置文件
const { merge } = require('webpack-merge');
const common = require("./webpack.common");
const { appDist } = require('./paths');
const webpack = require('webpack');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); // 编译速度分析（可以看到各个 loader、plugin 的构建时长）
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap(merge(common, {
    mode: 'development',  //开发模式会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development
    //配置开发环境的输出
    output: {
        filename: '[name].bundle.js',  // bundle 文件名 （[name]是入口文件的名字）
        path: appDist, // bundle 文件路径
        clean: true // 编译前清除目录
    },
    // 开发工具，开启source map（将编译后的代码映射回原始源代码，追踪到 error 和 warning 在源代码中的原始位置）
    devtool: 'eval-cheap-module-source-map', // 为加快生产环境打包速度，暂时不为生产环境配置 devtool。
    // 配置开发服务器，具备实时重新加载提高开发效率
    devServer: {
        host: 'localhost',
        port: '8888',
        hot: true,  // 热更新默认true（HMR : Hot Module Replacement  热模块替换（它允许在运行时更新所有类型的模块，而无需完全刷新））
        // contentBase: './dist' // 告诉服务器从哪里提供内容，只有在你想要提供静态文件时才需要。
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}))